ตั้งเป็นหน้าแรก  
Bookmark and Share  
  หน้าแรก | ประกาศสินค้า | วิทยุออนไลน์ | เกมส์ | หาเพื่อน | ดูทีวีออนไลน์ | บันเทิง | บทความดีๆ | ไอที | สาระน่ารู้ | สารบัญเว็บไซต์ | ติดต่อลงโฆษณา  
     อุปกรณ์สื่อสาร   คอมพิวเตอร์   กีฬา   บ้านและที่ดิน   เกมส์และของเล่น   เบ็ดเตล็ด   ของสะสม 
     ประกาศ    ดนตรี   ยานพาหนะ   เครื่องใช้ไฟฟ้า   สัตว์เลี้ยงและต้นไม้   เครื่องแต่งกาย   
     อุปกรณ์ถ่ายภาพ    อุตสาหกรรม   หนังสือและเครื่องเขียน   งานและการศึกษา   อาหารและสุขภาพ   อุปกรณ์สำนักงาน   
   หน้าแรกหมวดคอมพิวเตอร์และเทคโนโลยี » [How to]การทำภาพเคลื่อนไหว (GIF animation)อย่างง่าย ด้วย PhotoShopและImageReady
 

[How to]การทำภาพเคลื่อนไหว (GIF animation)อย่างง่าย ด้วย PhotoShopและImageReady
ส่งบทความนี้ต่อ
พิมพ์หน้านี้


แบ่ง ออกเป็นสอนขั้นตอนใหญ่ๆ ก็คือ การเตรียมเฟรมภาพที่จะใช้ และการนำภาพที่ได้ไปทำให้มันเคลื่อนไหวโดยใช้โปรแกรม ImageReady(มันแถมมากับ PhotoShop อยู่แล้วแหละ)

[Step 1] วางแผนและตระเตรียมเฟรมภาพต่างๆใน PhotoShop

ขอเล่าเป็นเรื่องเป็นราวเลยก็แล้วกันนะครับ - - เพราะแต่ละคนจะมีวีธีทำไม่เหมือนกัน

สำหรับงานนี้ผมต้องการภาพหนูอาวี่ทำตากระพริบปริบๆ เป็นวิธีการทำภาพเคลื่อนไหวที่ง่ายที่สุดแล้วมั้ง - -

เริ่มแรกผมจึงวาดภาพหนูอาวี่ขณะลืมตา และ หลับตา (ด้วยความขี้เกียจ อย่างหลังจึงวาดแต่ตา)

เปิดภาพที่ว่าใน PhotoShop



จัดการลงสีให้เรียบร้อย(ไม่ลงก็ได้ ตามสะดวก) ภาพได้จะใช้เป็นเฟรมตอนลืมตา

จากนั้นก็ทำการก๊อปปี้ภาพนี้ขึ้นมาอีก 1 เลเยอร์(ลากไปปล่อยตามลูกศรสีแดง) เพื่อทำการตกแต่งสำหรับใช้เป็นเฟรมหลับตา



ใช้เครื่องมือ Clon Stamp เนียนลบลูกตาออก (เป็นผีไม่มีตาชั่วคราว =[]=) วิธีใช้งานคือ กด Alt ค้างไว้แล้วไปคลิกที่สีผิว (กากบาท)

แล้วไปคลิกเพื่อลบลูกตาออกได้เลย (กว่าจะเสร็จก็คลิกไปหลายทีเหมือนกัน)



ใช้ Marquee Tool(1) ทำการเลือก (จะเรียกว่าครอบก็ได้ ^^) กด Ctrl+C และ Ctrl+V เพื่อก๊อปภาพตา(ตอนหลับตา)ไปยังเลเยอร์ใหม่

แล้ว ใช้ Move Tool(2) ลากไปวางบนหน้า สุดท้ายก็ปรับ Layer Mode(3) ให้เป็น Multiply เพื่อให้ส่วนที่เป็นสีขาวโปร่งใส(แบบว่าขี้เกียจลบ - -)

(สำหรับขั้นตอนนี้ใครอาจจะเขียนภาพตา(ตอนหลับตา)ลงไปเลยก็ได้ ไม่ต้องก๊อปให้เสียเวลา ^^)



จัดวางตำแหน่ง ตกแต่ง และทำการ Crop ให้เรียบร้อย โดยการใช้ Marquee Tool เจ้าเก่า

ครอบบริเวณภาพที่ต้องการ (สามารถกดปุ่ม Shift ค้างไว้เพื่อให้เป็นรูปสี่เหลี่ยมจัตตุรัส)

แล้วไปที่เมนู Image>>Crop เป็นอันเสร็จสิ้นการ Crop



สุดท้ายเราจะได้ 2 เฟรม คือ ลืมตา และหลับตา

(บางคนอาจได้หลายเฟรม) โดยเราจะใช้การเปิดปิดการแสดงผลของเลเยอร์(รูปลูกตา)(ลองทดสอบดูได้)

เพื่อให้ได้เฟรมตามต้องการ เมื่อพร้อมทุกเฟรมแล้วเราก็พร้อมที่จะผลงานของเราต่อไปยังโปรแกรม Image Ready






[Step 2] กำกับการเคลื่อนไหวใน ImageReady

หากใครยังค้างอยู่ใน PhotoShop ก็สามารถส่งงานไปยัง ImageReady ได้ง่ายๆโดยกดปุ่ม Edit in ImageReady



ยินดีต้อนรับพี่น้องทุกท่านสู่ ImageReady เพื่อความปลอดภัยกรุณาเลือกวงแดงทางด้านซ้ายเป็น Optimize

เพราะจะได้แสดงภาพงานเราหลังจากเซฟไปแล้วจริงๆ (สามารถปรับแต่งเพิ่มเติมได้ที่วงแดงทางด้านขวา)

เป็นอันเสร็จสิ้นการเตรียมตัว (นี่เพิ่งเตรียมเรอะ =[]=')



ขั้นแรก ไปควบคุมการแสดงผลของเลเยอร์(ปกติอยู่ขวาล่างสุด) ให้แสดงภาพหนูอาวี่ตอนลืมตา

เป็นอันเสร็จสิ้นเฟรมแรก คลิกปุ่ม Duplicates Current Frame (2) เพื่อเริ่มการตั้งค่าที่เฟรมต่อไป

(ที่แท็บ Animation จะปรากฎเฟรมใหม่ขึ้นมา)



ที่เฟรมใหม่นี้เราก็ตั้งค่าการแสดงผลเลเยอร์ให้เฟรมนี้เป็นเฟรมหลับตา



ใต้เฟรมแต่ละเฟรมเริ่มต้นจะมีคำว่า 0 Sec (0 วินาที) อยู่ นี่คือเวลาในการแสดงผลของแต่ละเฟรม(ค้างกี่วิ)

เราสามาถคลิกที่นี่เพื่อเลือกเวลาที่ต้องการได้ (Other.. ถ้าพี่น้องต้องการกรอกเอง)



ทีนี้ผมก็สร้างเฟรมต่างๆขึ้นมาและปรับเวลาตามภาพ

ตามบทที่วางไว้ว่า กระพริบตาหนึ่งครั้ง ค้าง และกระพริบถี่ๆอีกสองครั้ง (แล้วเริ่มใหม่)

ลองกดปุ่ม play ในวงแดง เพื่อทดลองเล่นภาพเคลื่อนไหวดูได้ (อย่าถามว่าหยุดยังไง ^^')



เมื่อพอใจแล้ว พี่น้องสามารถย่อ/ขยายภาพได้ที่ Image>>Image Size... (50x50 สำหรับอิโมชั่นใน msn)

และทำการเซฟได้ที่ File>>Save Optimize As.. (ใครตั้งชื่อภาษาไทยจะมีการเตือนนิดหน่อยไม่ต้องไปสนใจมัน)

เอาเป็นว่าไปดูผลงานกันดีกว่า ^^




สำหรับใครที่อยากแอดวานซ์มากก่านี้ ลองเปิดภาพ gif animation จากที่ต่างๆโดยใช้ ImageReady ดูแล้วกันนะครับ

จะช่วยให้เข้าใจมากขึ้น

วันนี้ผมแนะนำได้แค่นี้ สวัสดีครับ

ปล.สงสัยตรงไหนถามได้นะครับ ^^


_/|\_ ขอบคุณบทความดีๆจาก http://dadeemodify.exteen.com/
 

บทความอื่นๆในหมวด
• การทำตัวหนังสือเรืองแสงจาก Photoshop
• การลดขนาดภาพทั้ง Folder ใน Photoshop
• 10 เคล็ดลับเพื่อความปลอดภัยในการใช้โปรแกรมเมสเซ็นเจอร์ี้
• วิธีกำจัดไวรัส Antivirus XP 2008
• Convert ไฟล์ pdf มาเป็นไฟล์ word บนเว็บไซต์
• วิธีแ้ก้ไอคอนที่หน้าจอคอมพิวเตอร์มีพื้นหลังเป็นสี
• 6 เทคนิคการใช้งาน Mozilla Firefox ที่คุณอาจไม่เคยรู้
• รวบรวม กลโกงออนไลน์ ที่ต้องระวังตัว
• เสียเวลา 5 นาที แต่ได้ใช้อินเทอร์เน็ตฟรีตลอดชีวิต กับ Green Bangkok Wi fi
• เอาคีย์ลัดในการเล่นคอมฯมาฝากครับ
» บทความในหมวดทั้งหมด

Tag
notebook  คอมพิวเตอร์  ตัวหนังสือเรืองแสง  winamp  icon  Action  photoshop  MSN  google  การ์ตูน  คียร์ลัด  copy  msn  Antivirus XP 2008  ไวรัส  msn  แก้ไวรัส  email  เมลล์จยะ  ลดขนาดภาพ gif  msn  photoshop  โฟลเดอร์  xp  WinXP  Firefox  อินเตอร์เน็ต  Photoshop  Show Hidden File  แก้ไวรัส  hi5  gmail  google  youtube  วิดีโอ  password  สร้าง e-Book  Green Bangkok Wi-fi  ข้อมูล    
บทความที่เกี่ยวข้อง
การทำตัวหนังสือเรืองแสงจาก Photoshop
หลังจากงมโข่งอยู่นาน ก็ได้งานง่าย ๆ แต่สวยถูกใจมาอันนึงครับ ลงเล่นกันดูนะครับ สวยแล้วก็สนุกดีด้วยครับ
การลดขนาดภาพทั้ง Folder ใน Photoshop
หากต้องการลดขนาดภาพทีละภาพด้วยโปรแกรม Photoshop คงไม่มีปัญหาอะไรแต่ถ้าเราต้องการลดขนาดภาพทั้ง Folder
Action เจ๋งๆของ Photoshop
Action เจ๋งๆของ Photoshop มาฝากครรับ
ส ร้ า ง รู ป น อ ก ก ร อ บ กั บ p h o t o s h o p กั น
วันนี้บีเอาเทคนิคการทำ รูปนอกกรอบมาฝากครับ ง่าย ๆ และสวยงามตามคอนเซ็ปต์ “ง่าย ๆ จนยายงง” เหมือนเดิมครับ ถ้าใครไม่รู้ว่ารูปนอกกรอบนี่มันยังไง จะเหมือน
  แสดงความคิดเห็น
โปรดอ่านกฎกติกาก่อนแสดงความคิดเห็น
1. โปรดงดเว้น การใช้คำหยาบคาย ส่อเสียด ดูหมิ่น กล่าวหาให้ร้าย สร้างความแตกแยก หรือกระทบถึงสถาบันอันเป็นที่เคารพ
2. ทุกความคิดเห็นไม่เกี่ยวข้องกับผู้ดำเนินการเว็บไซต์ และไม่สามารถนำไปอ้างอิงทางกฎหมายได้
3. ทีมงานเว็บมาสเตอร์ขอสงวนสิทธิ์ในการลบความคิดเห็น โดยไม่ต้องชี้แจงเหตุผลใดๆ ต่อเจ้าของความคิดเห็นนั้น
 

แสดงความคิดเห็นของท่านได้ที่นี่
ความคิดเห็น :
*
ชื่อ/Email :
    คลิกเพื่อขอรหัสโค๊ดใหม่
รหัสยืนยัน :
 

Search Engine Bot Detect : บอทยังไม่ได้มาเก็บข้อมูล